<!--
 * @Author: Liu
 * @Date: 2023-05-08 10:52:26
 * @LastEditTime: 2023-05-08 17:28:40
-->
<template>
    <div class="popover-box" v-if="props.isShow">
      <div :class="['popover-content', 'dialog-inner', props.isShow && 'scale-in-center']">
        
        
        <!-- <div v-if="props.icon" :class="[5].includes(category)? 'icon icon-5': 'icon'"><img :src="props.icon" alt="" /></div> -->
        <div :class="'title center'" v-html="title"></div>
        <!-- <div class="tips" v-if="tips"><span>*可前往我的奖品页面查看获奖明细</span></div> -->
        <div class="footer">
          <div class="btn" role="button" @click="handleConfirm">确 定</div>
        </div>
      </div>
  
    </div>
  </template>
  
  <script setup name="GameOver">
  import utils from '../utils';
  const emit = defineEmits(['handleClose'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false
    },
    category: {
      type: Number
    },
    title: {
      type: String,
      default: '恭喜您'
    },
    icon: {
      type: String
    },
    tips: {
      type: Boolean,
    },
    close: {
      type: Boolean
    }
  })
  const handleConfirm = () => {
    if (props.close) {
      emit('handleClose')
      return
    }
    if (utils.getOperationEnvironment() == "uni_mini") {
        wx?.miniProgram?.navigateBack()
    } else {
        window.UNIApp?.closePage()
    }
    
    
  }
  
  </script>
  <style  scoped>
  .popover-box {
    position: fixed;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "ChangAnunitype-Bold";
    top: 0;
  
  }
  
  .popover-content {
    width: 606px;
    min-height: 397px;
    padding:  50px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    border-radius: 30px;
    text-align: center;
  }
  .popover-content::after {
    content: ' ';
    position: absolute;
    width: 100vw;
    height: 70vw;
    top: -44px;
    background: url(https://yinli-qixi-run.varwey.com/2023_ca/chess1025/images/guang-bg.png);
    background-size: 100% 100%;
    z-index: -2;
  }
  
  .icon {
    display: flex;
    justify-content: center;
    padding: 10px 0 15px 0;
   
  }
  .icon-5 {
     position: absolute;
    top: -72px;
  }
  .icon > img {
    max-width: 50%;
  }
  .title {
    margin-top: 10px;
  }
  .title.center {
    margin-top: 70px;
  }
  .tips {
    color: #999;
    font-size: 20px;
    font-family: "ChangAnunitype-Bold";
  }
  
  .popover-bg {
    width: 100%;
    height: 100%;
  }
  
  .bell_bg {
    position: absolute;
    width: 119px;
    height: 118px;
    top: -60px;
  }
  
  .bell {
    position: absolute;
    width: 61px;
    height: 62px;
    top: -30px;
  
  }
  
  .popover-data {
    /* font-family: "ChangAnunitype-Regular"; */
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #0160a5;
    letter-spacing: 2px;
    font-weight: 900;
    margin-top: 20px;
  }
  
  .footer .btn {
    /* background: linear-gradient(180deg, #91d8ff, #4e81e9); */
    border-radius: 50px;
  }
  </style>